<template>
    <el-card style="height: calc(100% - 2px);width: calc(100% - 2px); ">
            <el-divider content-position="left">今日排行</el-divider>

            <div style="width: 100%;">
                <el-select v-model="rankingCriteriaValue"
                           @change="updateSortStatue"
                           placeholder="请选择热度排行依据" style="width: 100%;padding: 10px 0px;">
                    <el-option
                            style="text-align: center;width: 100%"
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <el-table
                    :key="randomNum"
                    :data="allBlogs"
                    style="width: 100%;"
                    height="350"
                    :header-cell-class-name="tableHeaderClassName"
                    :row-class-name="tableRowClassName">
                <el-table-column
                        prop="title"
                        label="标题"
                        header-align="center"
                        style="width: 100%;">
                </el-table-column>

                <el-table-column
                        :prop="rankingCriteriaValue"
                        header-align="center"
                        sortable
                        :sort-orders="['descending', 'ascending', null]"
                        :label="rankingCriteriaLabel"
                        style="width: 100%;">
                </el-table-column>

            </el-table>
        </el-card>
</template>

<script>
    export default {
        name: "RankList",
        data(){
            return{
                allBlogs:[],                          //表格数据
                options: [{
                    value: 'hitsNum',
                    label: '点击量'
                },{
                    value: 'likeCount',
                    label: '点赞量'
                }, {
                    value: 'collectionCount',
                    label: '收藏量'
                }],                         //热度排行依据选项
                rankingCriteriaValue: 'hitsNum',         //热度排行依据value
                rankingCriteriaLabel: '点击量',         //热度排行依据label
                randomNum:0,                //用于更新table,解决表头不能更新问题
            }
        },
        created() {
            this.queryAllBlogs();
        },
        mounted() {
            this.updateSortStatue();
        },
        methods:{
            //切换排序状态
            updateSortStatue(){
                this.$nextTick(()=>{
                    document.getElementsByClassName('checkSortStatue')[0].click();
                })
            },
            //返回表头元素的class
            tableHeaderClassName({ rowIndex, columnIndex}){
                if (rowIndex==0&&columnIndex==1){
                    return "checkSortStatue";
                }
            },
            //查询所有blog数据
            queryAllBlogs(){
                if (this.queryLabelId!=0){
                    this.pageIndex=1;
                }
                this.request.get("/index/blog/queryAllBlogs",{
                    params:{

                    }
                }).then(res => {
                    if (res.code=='200'){
                        this.allBlogs=res.data.blogs;
                    }
                })
            },
            //为行增加高亮状态
            tableRowClassName({row, rowIndex}) {
                row;
                rowIndex+=1;
                if (rowIndex%6 === 1) {
                    return 'rowStyle-1';
                } else if (rowIndex%6 === 2) {
                    return 'rowStyle-2';
                }else if (rowIndex%6 === 3) {
                    return 'rowStyle-3';
                } else if (rowIndex%6 === 4) {
                    return 'rowStyle-4';
                }else if(rowIndex%6 === 5){
                    return 'rowStyle-5';
                }
                return '';
            },
            //通过热度排行的依据value查询其label
            queryLabelByRankingCriteria(){
                return this.options.filter(v=>(v.value==this.rankingCriteriaValue))[0].label;
            },
        },
        watch:{
            rankingCriteriaValue(newVal,oldVal){
                console.log(oldVal);
                console.log(newVal);
                if (oldVal!=newVal){
                    this.rankingCriteriaLabel=this.queryLabelByRankingCriteria();
                    this.randomNum=this.randomNum+1;

                }

            }
        }
    }

</script>

<style scoped>

    /deep/ .el-table .rowStyle-1 {
        background: rgba(253, 245, 230, 0.34);
    }

    /deep/ .el-table .rowStyle-2 {
        background: rgba(221, 240, 169, 0.49);

    }

    /deep/ .el-table .rowStyle-3 {
        background: rgba(230, 244, 253, 0.35);
    }

    /deep/ .el-table .rowStyle-4 {
        background: #d3b8e670;
    }

    /deep/ .el-table .rowStyle-5 {
        background: rgba(113, 57, 65, 0.06);
    }

    /deep/ .tableHeaderCellStyle {
        text-align: center;
    }

    /deep/ .el-input--suffix .el-input__inner {
        padding-right: 30px;
        text-align: center;
        color: rgba(192, 196, 204, 0.55);
    }


    /deep/ .el-card__body{
        padding: 20px;
        height: calc(100% - 40px);
    }


</style>